<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .kuang {
            height: 200px;
            min-width: 200px;
            line-height: 200px;
            text-align: center;
            background-color: coral;
            display: inline-block;
            margin: 50px;
        }

    </style>
</head>


<body>
<div id="app">
    <div class="kuang">
        <!-- 在 "change" 而不是 "input" 事件中更新 -->
        <input v-model.lazy="msg1"/>
        <div>{{msg1}}</div>
    </div>
    <div class="kuang">
        <!--如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：-->
        <input v-model.number="msg2"/>
        <div>msg2</div>
    </div>
    <div class="kuang">
        <!--首尾空格清理-->
        <input v-model.tirm="msg3"/>
        <div>{{msg3}}</div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            msg1: "lazy修饰符",
            msg2: "number修饰符",
            msg3: "tirm修饰符"
        }
    })
</script>
</body>
</html>